// css初始化
*{
    margin:0;
    padding:0;
    box-sizing: border-box;

}
// 声明图标
@font-face {
    font-family:'electronicFont';
    src:  url('../fonts/DS-DIGIT.TTF');
  }
li{
    list-style: none;
}
body{
    background: url(../images/bg.jpg) no-repeat top center;
    line-height:1.15;
    header{
        position: relative;
        height: 1.25rem;
        background:url(../images/head_bg.png) no-repeat;
        background-size: 100% 100%;
        h1{
        font-size: 38PX;
        text-align: center;
        line-height: 1rem;
        color:#fff;
        }
        .showtime{
            position: absolute;
            top:0;
            right: 0.375rem;
            line-height: .9375rem;
            color:rgba(255,256,255,.7);
            color:.25rem;

        }
    }
}
// 页面主体盒子
.mainbox{
    display: flex;
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    padding:.125rem .125rem 0;
    color:#fff;
    .column{
        flex:3;
        &:nth-child(2){
            flex:5;
            margin:0 .125rem .125rem;
        }
    }
    .panel{
        position: relative;
        height:3.875rem;
        border:1px solid rgba(25,186,139,.17);
        background: url(../images/line.png)no-repeat rgba(255,255,255,0.04);
        padding:0 .1875rem .5rem;
        margin-bottom: .1875rem;
        &::before{
            content:'';
            position: absolute;
            top:0;
            left:0;
            width:10px;
            height: 10px;
            border-left:2px solid #02a6b5;
            border-top:2px solid #02a6b5;
        }
        &::after{
            content:'';
            position: absolute;
            top:0;
            right:0;
            width:10px;
            height: 10px;
            border-right:2px solid #02a6b5;
            border-top:2px solid #02a6b5;
        }
        .panel-footer{
            position: absolute;
            bottom:0;
            left:0;
            width:100%;
            &::before{
                content:'';
                position: absolute;
                bottom:0;
                left:0;
                width:10px;
                height: 10px;
                border-left:2px solid #02a6b5;
                border-bottom:2px solid #02a6b5;
            }
            &::after{
                content:'';
                position: absolute;
                bottom:0;
                right:0;
                width:10px;
                height: 10px;
                border-right:2px solid #02a6b5;
                border-bottom:2px solid #02a6b5;
            }  
        }
        h2{
            height:.6rem;
            color:#fff;
            line-height: .6rem;
            text-align: center;
            font-weight: 400;
            font-size: .25rem;
            a{
                color:#fff;
                text-decoration: none;
                margin-left:.125rem;
            }
        }
        .chart{
            height: 3rem;
        }
       
    }

}
// 数字模块
.no{
    background-color: rgba(101,132,226,0.1);
    padding:.1875rem;
    .no-hd{
        position: relative;
        border:1px solid rgba(25,186,139,0.17);
        &::before{
            position: absolute;
            top:0;
            left:0;
            content:'';
            width:30px;
            height:10px;
            border-left:2px solid #02a6b5;
            border-top:2px solid #02a6b5;
        }
        &::after{
            position: absolute;
            bottom:0;
            right:0;
            content:'';
            width:30px;
            height:10px;
            border-right:2px solid #02a6b5;
            border-bottom:2px solid #02a6b5;
            
        }
     ul{
         display: flex;
         li{
             position: relative;
            flex:1;
            line-height: 1rem;
            font-size:.875rem;
            text-align: center;
            color:#ffeb7b;
            font-family:'electronicFont';
            &::after{
                position: absolute;
                top:25%;
                right:0;
                content:'';
                width:1px;
                height:50%;
                background-color:rgba(255,255,255,0.2);

            }
        }
     }
    }
    .no-bd{
        ul{
            display: flex;
            li{
                flex:1;
                height:.5rem;
                line-height: .5rem;
                text-align: center;
                color:rgba(255,255,255,.7);
                font-size: .125rem;
                padding-top:.125rem;
            }
        }
    
    }  
}
// 地图模块
.map{
    position: relative;
    height: 10.125rem;
    .map1{
        width:6.475rem;
        height:6.475rem;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        background: url(../images/map.png) no-repeat;
        background-size: 100% 100%;
        opacity: 0.3;

    }
    .map2{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        width:8.0375rem;
        height:8.0375rem;
        background:url(../images/lbx.png) no-repeat;
        background-size: 100% 100%;
        animation: rotate1 15s linear infinite;
        opacity: 0.6;
    }
    @keyframes rotate1 {
        form{
            transform: translate(-50%,-50%) rotate(0deg);
        }
        
        to{
            transform: translate(-50%,-50%) rotate(360deg);

        }
    }
    .map3{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        width:7.075rem;
        height:7.075rem;
        background:url(../images/jt.png) no-repeat;
        background-size: 100% 100%;
        animation: rotate2 10s linear infinite;
        opacity: 0.6;
    }
    @keyframes rotate2 {
        form{
            transform: translate(-50%,-50%) rotate(0deg);
        }
        
        to{
            transform: translate(-50%,-50%) rotate(-360deg);

        }
    }
    .chart{
        position: absolute;
        top:0;
        left:0;
        // background-color:#fff;
        width:100%;
        height: 100%;
    }

}

// 约束屏幕尺寸
@media screen and (max-width:1024px){
    html{
        font-size: 42px!important;
    }
}  
@media screen and (min-width:1920px){
    html{
        font-size: 80px!important;
    }
}
    


